<!--投诉建议-->
<template>
  <div class="complainContainer">
    <!--头部bar开始-->
    <van-sticky>
      <p class="titlebar">
        <span>{{options.centerText}}</span>
      </p>
    </van-sticky>
    <!--头部bar结束-->

    <van-pull-refresh v-model="refreshing" @refresh="onRefresh" success-text="刷新成功">
      <!--选中时间和状态开始-->
      <div class="areacontent">
        <van-row gutter="30">
          <van-col span="12">
            <p @click="showPickerdate = true" class="dateselect">
              <span>{{signdate}}</span>
              <van-icon name="calender-o" class="arrowDown" />
            </p>

            <van-popup v-model="showPickerdate" position="bottom">
              <van-datetime-picker
                type="date"
                @cancel="showPickerdate = false"
                @confirm="onConfirmdate"
                v-model="currentDate"
                :min-date="minDate"
                :max-date="maxDate"
                :formatter="formatterDate"
              />
            </van-popup>
          </van-col>
          <van-col span="12">
            <van-dropdown-menu active-color="#0AD691">
              <van-dropdown-item
                v-model="status"
                :options="statuscolums"
                @change="onConfirmstatuscolums"
              />
            </van-dropdown-menu>
          </van-col>
        </van-row>
      </div>
      <!--选中时间和状态结束-->
      <div class="divheight"></div>

      <van-list
        v-if="complainList.length>0"
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了..."
        @load="onLoad"
        offset="20"
      >
        <div
          class="complainContent"
          v-for="(item, index) in complainList"
          :key="index"
          @click="toDetail(item.id,item.status)"
        >
          <div class="complainContentflex">
            <div class="complainleft status1" v-if="item.status==1">
              <span class="text">待处理</span>
            </div>
            <div class="complainleft status2" v-if="item.status==3">
              <span class="text">已处理</span>
            </div>
              <div class="complainleft status3" v-if="item.status==2">
              <span class="text">处理中</span>
            </div>
            <div class="complainright">
              <p class="title">{{item.content}}</p>
              <p class="time">投诉时间：{{item.create_date}}</p>
              <p class="time" v-if="item.status==1">投诉进度：投诉单未领取</p>
              <p class="time" v-if="item.status==2">投诉进度：投诉单已领取</p>
              <p class="time" v-if="item.status==3">投诉进度：投诉单已完成</p>
            </div>
          </div>
          <div class="divheight"></div>
        </div>
      </van-list>

      <div class="noData" v-else>
        <van-image width="163px" height="120px" fit="contain" :src="nochekData" />
        <p>暂无数据 ！</p>
      </div>
    </van-pull-refresh>
    <!--新建按钮-->
    <!-- <div class="CheckBut">
      <router-link :to="{ path: '/complainForm', query: { add: '1' }}">
        <button class="newbut">录入</button>
      </router-link>
    </div> -->
  </div>
</template>
<script>
import CommonBar from "../common/commonBar";
import { mapState } from "vuex";
export default {
  components: {
    CommonBar
  },
  computed: {
    ...mapState({
      token: state => state.Authorization
    })
  },
  data() {
    return {
      nochekData: require("../../../static/image/nochekData.png"),
      options: {
        centerText: "投诉建议"
      },
      status: "",
      statuscolums: [
        {
          text: "全部",
          value: ""
        },
        { text: "待处理", value: "1" },
        { text: "处理中", value: "2" },
        { text: "已处理", value: "3" }
      ],
      //年月日
      showPickerdate: false,
      signdate: "", //出生日期
      currentDate: new Date(),
      minDate: new Date(1900, 1, 1),
      maxDate: new Date(),
      complainList: [],
      pageNumber: 1,
      pageSize: 15,
      loading: false,
      finished: false,
      //下拉刷新
      refreshing: false
    };
  },
  created() {
    this.showDate();
    this.ComplaintsList();
  },
  mounted() {},
  methods: {
    //下拉刷新
    onRefresh() {
      this.loading = false;
      this.finished = false;
      this.pageNumber = 1;
      this.complainList = [];

      this.ComplaintsList();
    },
    //上拉加载
    onLoad() {
      this.loading = true;
      this.pageNumber++;
      this.ComplaintsList();
    },
    //获取投诉列表
    ComplaintsList() {
      var params = {
        pageNumber: this.pageNumber,
        pageSize: this.pageSize,
        token: this.token,
        status: this.status,
        date: this.signdate
      };
      this.$toast.loading({
        mask: true,
        message: "加载中..."
      });
      this.$http
        .get(
          `${this.$basePath}?service=App.ComplaintsSuggestions.ComplaintsList&api=89`,
          {
            params: params
          }
        )
        .then(res => {
          if (res.ret == 200) {
            this.$toast.clear();
            this.refreshing = false;
            this.complainList = this.complainList.concat(res.data.list);
            if (this.complainList.length >= res.data.total) {
              this.finished = true;
            }
            this.loading = false;
          } else {
            this.$toast({ message: res.msg });
          }
        });
    },
    //修改状态
    onConfirmstatuscolums() {
      this.loading = false;
      this.finished = false;
      this.pageNumber = 1;
      this.complainList = [];
      this.ComplaintsList();
    },
    //日期选中
    onConfirmdate(val) {
      var d = new Date(val);
      let year = val.getFullYear();
      let month = val.getMonth() + 1;
      let day = val.getDate();
      if (month >= 1 && month <= 9) {
        month = `0${month}`;
      }
      if (day >= 1 && day <= 9) {
        day = `0${day}`;
      }
      var datetime = year + "-" + month + "-" + day;
      this.signdate = datetime;
      this.showPickerdate = false;
      this.loading = false;
      this.finished = false;
      this.pageNumber = 1;
      this.complainList = [];
      this.ComplaintsList();
    },
    //日期格式化
    formatterDate(type, val) {
      if (type === "year") {
        return `${val}年`;
      } else if (type === "month") {
        return `${val}月`;
      } else if (type === "day") {
        return `${val}日`;
      }
      return val;
    },
    //系统日期
    showDate() {
      var d = new Date();
      let year = d.getFullYear();
      let month = d.getMonth() + 1;
      let day = d.getDate();
      if (month >= 1 && month <= 9) {
        month = `0${month}`;
      }
      if (day >= 1 && day <= 9) {
        day = `0${day}`;
      }
      this.signdate = year + "-" + month + "-" + day;
    },
    toDetail(id, status) {
      this.$router.push({
        //核心语句
        path: "/complainForm", //跳转的路径
        query: {
          //路由传参时push和query搭配使用 ，作用时传递参数
          id,
          status
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
@import "../../assets/css/home";

</style>